<template>
  <div>
    <Row :gutter="24" style="margin-bottom: 20px;">
      <i-col :xs="24" :md="12" :lg="8" v-if="userStatistics" >
        <Card style="height: 280px;" title="用户统计" icon="ios-people" :padding="0" shadow>
          <Spin size="large" fix v-if="userStatisticsLoading"></Spin>
          <a href="#" slot="extra" @click.prevent="initUserStatisticsData">
            <Icon type="ios-refresh"></Icon>
            刷新
          </a>
            <CellGroup>
                <Cell v-for="(userStatistics, index) in userStatisticsData" :key=index :title="userStatistics.title" :to="userStatistics.routerName">
                    <Icon :type="userStatistics.icon" :color="userStatistics.color" size="24" slot="icon"/>
                    <Tag :color="userStatistics.color" size="large" slot="extra">{{userStatistics.count || 0}}</Tag>
                </Cell>
            </CellGroup>
        </Card>
      </i-col>
      <i-col :xs="24" :md="12" :lg="8" v-if="mallStatistics" >
        <Card style="height: 280px;" title="商城统计" icon="ios-cart" :padding="0" shadow>
          <Spin size="large" fix v-if="mallStatisticsLoading"></Spin>
          <a href="#" slot="extra" @click.prevent="initMallStatisticsData">
            <Icon type="ios-refresh"></Icon>
            刷新
          </a>
            <CellGroup>
                <Cell v-for="(mallStatistics, index) in mallStatisticsData" :key=index :title="mallStatistics.title" :to="mallStatistics.routerName">
                    <Icon :type="mallStatistics.icon" :color="mallStatistics.color" size="24" slot="icon"/>
                    <Tag :color="mallStatistics.color" size="large" slot="extra">{{mallStatistics.count || 0}}</Tag>
                </Cell>
            </CellGroup>
        </Card>
      </i-col>
      <i-col :xs="24" :md="12" :lg="8" v-if="accountStatistics" >
        <Card style="height: 280px;" title="平台出入账统计" icon="logo-yen" :padding="0" shadow>
          <Spin size="large" fix v-if="accountStatisticsLoading"></Spin>
          <a href="#" slot="extra" @click.prevent="initAccountStatisticsData">
            <Icon type="ios-refresh"></Icon>
            刷新
          </a>
            <CellGroup>
                <Cell v-for="(accountStatistics, index) in accountStatisticsData" :key=index :title="accountStatistics.title" :to="accountStatistics.routerName">
                    <Icon :type="accountStatistics.icon" :color="accountStatistics.color" size="24" slot="icon"/>
                    <Tag :color="accountStatistics.color" size="large" slot="extra">{{accountStatistics.count || 0}}</Tag>
                </Cell>
            </CellGroup>
        </Card>
      </i-col>
    </Row>
    <Row :gutter="24" style="margin-bottom: 20px;" v-if="activitiTasks">
      <i-col :xs="24" :md="12" :lg="8">
        <Card>
          <p slot="title">
            <Icon type="ios-alarm"></Icon>
            指派人任务&nbsp;&nbsp;-（{{assigneeCount}}）
          </p>
          <a href="javascript:;" slot="extra" @click="showTaskDetail(0)">
            <Tooltip content="更多">
              <Icon type="ios-more"></Icon>
            </Tooltip>
          </a>
          <p class="not-data" v-if="assigneeDataShow">
            <Icon type="md-close-circle" />暂无任务
          </p>
          <ul style="list-style-type:none" v-if="!assigneeDataShow">
            <Tooltip content="点击查看详情">
              <li v-for="(item,index) in assigneeTaskList" :key="index">
                <a href="javascript:;" @click="showTaskDetail(0)">{{ item.name }}</a>
              </li>
            </Tooltip>
          </ul>
        </Card>
      </i-col>
      <i-col :xs="24" :md="12" :lg="8">
        <Card>
          <p slot="title">
            <Icon type="ios-alarm-outline"></Icon>
            候选人任务&nbsp;&nbsp;-（{{candidateCount}}）
          </p>
          <a href="javascript:;" slot="extra" @click="showTaskDetail(1)">
            <Tooltip content="更多">
              <Icon type="ios-more"></Icon>
            </Tooltip>
          </a>
          <p class="not-data" v-if="candidateDataShow">
            <Icon type="md-close-circle" />暂无任务
          </p>
          <ul style="list-style-type:none" v-if="!candidateDataShow">
            <Tooltip content="点击查看详情">
              <li v-for="(item,index) in candidateTaskList" :key="index">
                <a href="javascript:;" @click="showTaskDetail(1)">{{ item.name }}</a>
              </li>
            </Tooltip>
          </ul>
        </Card>
      </i-col>
      <i-col :xs="24" :md="12" :lg="8">
        <Card>
          <p slot="title">
            <Icon type="md-alarm"></Icon>
            候选组任务&nbsp;&nbsp;-（{{groupCount}}）
          </p>
          <a href="javascript:;" slot="extra" @click="showTaskDetail(2)">
            <Tooltip content="更多">
              <Icon type="ios-more"></Icon>
            </Tooltip>
          </a>
          <p class="not-data" v-if="groupDataShow">
            <Icon type="md-close-circle" />暂无任务
          </p>
          <ul style="list-style-type:none" v-if="!groupDataShow">
            <Tooltip content="点击查看详情">
              <li v-for="(item,index) in groupTaskList" :key="index">
                <a href="javascript:;" @click="showTaskDetail(1)">{{ item.name }}</a>
              </li>
            </Tooltip>
          </ul>
        </Card>
      </i-col>
    </Row>
    <DauEcharts v-if="userEcharts"/>
  </div>
</template>

<script>
import { regCount, regAllCountByDate, allDau, goodsAndOrderCount, accountCount } from '@/api/home'
import { searchWaitTask } from '@/api/process'
import { getDate } from '@/api/utils-v2'
import InforCard from '_c/info-card'
import CountTo from '_c/count-to'
import DauEcharts from '_c/dau-echarts'
import * as ResponseStatus from '@/api/response-status'
import config from '@/config'

export default {
  name: 'home',
  components: {
    InforCard,
    CountTo,
    DauEcharts
  },
  data() {
    return {
      userStatistics: true,
      mallStatistics: true,
      accountStatistics: true,
      activitiTasks: true,
      userEcharts: true,
      userStatisticsLoading: true,
      mallStatisticsLoading: true,
      accountStatisticsLoading: true,
      userStatisticsData: [
        { title: '总用户数', icon: 'ios-people', count: 0, color: '#2d8cf0' },
        {
          title: '昨日新增',
          icon: 'ios-person-add-outline',
          count: 0,
          color: '#ff9900',
          routerName: 'DauReport'
        },
        {
          title: '今日新增',
          icon: 'ios-person-add',
          count: 0,
          color: '#ed3f14',
          routerName: 'DauReport'
        },
        {
          title: '一周新增',
          icon: 'md-person-add',
          count: 0,
          color: '#E46CBB'
        },
        { title: '一周活跃', icon: 'md-map', count: 0, color: '#9A66E4' }
      ],
      mallStatisticsData: [
        { title: '总商品数', icon: 'ios-cart', count: 0, color: '#2d8cf0'},
        { title: '总上架商品数', icon: 'md-grid', count: 0, color: '#ff9900' },
        {
          title: '总商品SKU数',
          icon: 'ios-grid-outline',
          count: 0,
          color: '#ed3f14'
        },
        {
          title: '总订单数',
          icon: 'md-list',
          count: 0,
          color: '#E46CBB'
        },
        {
          title: '待付款订单数',
          icon: 'md-basket',
          count: 0,
          color: '#9A66E4'
        },
        {
          title: '待发货订单数',
          icon: 'ios-basket',
          count: 0,
          color: '#187'
        }
      ],
      accountStatisticsData: [
        {
          title: '平台总结余',
          icon: 'logo-yen',
          count: 0,
          color: '#2d8cf0'
        },
        {
          title: '平台总入账',
          icon: 'logo-yen',
          count: 0,
          color: '#ff9900'
        },
        { title: '平台总出账', icon: 'logo-yen', count: 0, color: '#ed3f14' },
        { title: '商城总发放佣金', icon: 'logo-yen', count: 0, color: '#E46CBB' },
      ],
      taskUrls: {
        assigneeTasksUrl: '/process-activiti/admin/query/assignee-tasks',
        candidateTasksUrl: '/process-activiti/admin/query/candidate-tasks',
        groupTasksUrl: '/process-activiti/admin/query/group-tasks'
      },
      taskParamForm: {
        pageNo: 1,
        pageSize: 3
      },
      assigneeDataShow: true,
      assigneeCount: 0,
      assigneeTaskList: [],
      candidateDataShow: true,
      candidateCount: 0,
      candidateTaskList: [],
      groupDataShow: true,
      groupCount: 0,
      groupTaskList: []
    }
  },
  mounted() {
    this.userStatistics = config.homePageConfig.userStatistics
    this.mallStatistics = config.homePageConfig.mallStatistics
    this.accountStatistics = config.homePageConfig.accountStatistics
    this.activitiTasks = config.homePageConfig.activitiTasks
    this.userEcharts = config.homePageConfig.userEcharts
    if (this.userStatistics) {
      this.initUserStatisticsData()
    }
    if (this.mallStatistics) {
      this.initMallStatisticsData()
    }
    if (this.accountStatistics) {
      this.initAccountStatisticsData()
    }
    if (this.activitiTasks) {
      this.loadTasks()
    }
  },
  methods: {
    // 初始化跳动的数字数据，从后台取
    initUserStatisticsData() {
      this.userStatisticsLoading = true
      // 取注册数据
      regCount()
        .then(res => {
          this.userStatisticsLoading = false
          const data = res.data
          if (data.code === ResponseStatus.OK) {
            this.userStatisticsData[0].count = data.data[0]
            if (data.data[1].length) {
              this.userStatisticsData[1].count = data.data[1][0].totalLongCount
              this.userStatisticsData[2].count = data.data[1][1].totalLongCount
            }
          } else {
            this.$Message.error(data.message)
          }
        })
        .catch(err => {
          this.$Message.error(err)
        })
      var currDate = new Date()
      // 本周开始时间
      const beginDate = getDate(currDate, -6)
      // 本周结束时间
      const endDate = getDate(currDate, 0)
      const weekParams = {
        beginDateStr: beginDate,
        endDateStr: endDate
      }
      // 取本周总新增用户数
      regAllCountByDate(weekParams)
        .then(res => {
          const data = res.data
          if (data.code === ResponseStatus.OK) {
            this.userStatisticsData[3].count = data.data === null ? 0 : data.data
          } else {
            this.$Message.error(data.message)
          }
        })
        .catch(err => {
          this.$Message.error(err)
        })
      // 取本周总活跃用户数
      allDau(weekParams)
        .then(res => {
          const data = res.data
          if (data.code === ResponseStatus.OK) {
            this.userStatisticsData[4].count = data.data === null ? 0 : data.data
          } else {
            this.$Message.error(data.message)
          }
        })
        .catch(err => {
          this.$Message.error(err)
        })
    },
    initMallStatisticsData() {
      this.mallStatisticsLoading = true
      goodsAndOrderCount().then(response => {
        this.mallStatisticsLoading = false
        if (response.data.code === ResponseStatus.OK) {
          let theCount = response.data.data
          for (let i = 0; i < 6; i++) {
            this.mallStatisticsData[i].count = theCount[i]
          }
        } else {
          this.$Message.error(response.data.message)
        }
      }).catch(error => {
        console.log(error)
      })
    },
    initAccountStatisticsData() {
      this.accountStatisticsLoading = true
      accountCount().then(response => {
        this.accountStatisticsLoading = false
        if (response.data.code === ResponseStatus.OK) {
          let theCount = response.data.data
          for (let i = 0; i < 4; i++) {
            this.accountStatisticsData[i].count = theCount[i]
          }
        } else {
          this.$Message.error(response.data.message)
        }
      }).catch(error => {
        console.log(error)
      })
    },
    openTab(routerName) {
      if (routerName) {
        this.$router.push({
          name: routerName
        })
      }
    },
    loadTasks() {
      // 取指派人任务
      this.assigneeDataShow = true
      searchWaitTask(this, this.taskUrls.assigneeTasksUrl)
        .then(res => {
          const data = res.data
          if (data.code !== ResponseStatus.OK) {
            self.$Message.error(res.data.message)
            return
          }
          this.assigneeCount = data.data.total
          if (data.data.total === 0) {
            this.assigneeDataShow = true
          } else {
            this.assigneeDataShow = false
            this.assigneeTaskList = data.data.rows
          }
        })
        .catch(err => {
          this.$Message.error(err)
        })
      // 取候选人任务
      this.candidateDataShow = true
      searchWaitTask(this, this.taskUrls.candidateTasksUrl)
        .then(res => {
          const data = res.data
          if (data.code !== ResponseStatus.OK) {
            self.$Message.error(res.data.message)
            return
          }
          this.candidateCount = data.data.total
          if (data.data.total === 0) {
            this.candidateDataShow = true
          } else {
            this.candidateDataShow = false
            this.candidateTaskList = data.data.rows
          }
        })
        .catch(err => {
          this.$Message.error(err)
        })
      // 取候选组任务
      this.groupDataShow = true
      searchWaitTask(this, this.taskUrls.groupTasksUrl)
        .then(res => {
          const data = res.data
          if (data.code !== ResponseStatus.OK) {
            self.$Message.error(res.data.message)
            return
          }
          this.groupCount = data.data.total
          if (data.data.total === 0) {
            this.groupDataShow = true
          } else {
            this.groupDataShow = false
            this.groupTaskList = data.data.rows
          }
        })
        .catch(err => {
          this.$Message.error(err)
        })
    },
    showTaskDetail(type) {
      this.$router.push({
        name: 'activiti_tasks',
        params: {
          type: type
        }
      })
    }
  }
}
</script>

<style lang="less">
.count-style {
  font-size: 42px;
}
.not-data {
  text-align: center;
  color: #515a6e;
}
</style>
